<template>
  <div class="header_main-box">
    <el-menu :default-active="activeIndex"  mode="horizontal"   active-text-color="#00dfd5" style="max-width: 1400px;margin: 0 auto;">
      <el-menu-item index="logo" @click="$router.push('/')"><img src="../assets/images/logo.png" class="logo"></el-menu-item>
      <el-menu-item index="index" @click="$router.push('/')"><i class="iconfont icon-guangchang"></i>广场</el-menu-item>
      <el-menu-item index="attention" @click="checkLogin('/follow')"><i class="iconfont icon-guanzhu"></i>关注</el-menu-item>
      <el-menu-item index="foster" @click="checkLogin('/message')"><i class="iconfont icon-icon"></i>消息<el-badge :value="message_num" v-if="message_num!==0" :max="99" class="badge"></el-badge></el-menu-item>
      <el-menu-item index="search" >
        <el-popover
          placement="bottom"
          width="280"
          v-model="searchBox"
          trigger="click">
          <div>
            <span class="index-search-title">热门搜索</span>
            <div class="index-search-hot-box">
              <span class="index-search-hot" v-for="(item,index) in keyWord" :key="index" @click="keyWordSearch(item)">{{item.keywords}}</span>
            </div>
            <!--<div class="divider"></div>-->
            <!--<span class="index-search-ago"><i class="iconfont icon-lishi"></i>区块链</span>-->
            <!--<span class="index-search-ago"><i class="iconfont icon-lishi"></i>美食</span>-->
          </div>
          <el-input slot="reference"  @keyup.enter.native="search" placeholder="搜索用户或者宠博..." v-model="searchText" class="input-search" size="small"><i slot="suffix" class="el-icon-search" @click="search"></i></el-input>
        </el-popover>
      </el-menu-item>
      <el-menu-item index="writer" class="nav-right" @click="checkLogin('/writer')" ><el-button type="danger" icon="el-icon-edit" plain>写宠博</el-button></el-menu-item>
      <el-submenu v-if="token" index="personal" class="nav-right">
        <template  slot="title"><img :src="header_image" class="head_portrait" /></template >
        <el-menu-item index="home" @click="$router.push('/homepage')"><i class="iconfont icon-zhuye" ></i>我的主页</el-menu-item>
        <el-menu-item index="album" @click="$router.push('/album')"><i class="iconfont icon-xiangce"></i>我的相册</el-menu-item>
        <el-menu-item index="collection" @click="$router.push('/collection')"><i class="iconfont icon-collection-b"></i>我的收藏</el-menu-item>
        <el-menu-item index="praise" @click="$router.push('/praise')"><i class="iconfont icon-favour-full"></i>我的点赞</el-menu-item>
        <el-menu-item index="settings" @click="$router.push('/settings')"><i class="iconfont icon-shezhi"></i>设置</el-menu-item>
        <el-menu-item @click="loginOut" index="exit" ><i class="iconfont icon-tuichu"></i>退出</el-menu-item>
      </el-submenu>
      <el-menu-item v-if="!token" index="register" class="nav-right" @click="$router.push('/register')" >注册</el-menu-item>
      <el-menu-item v-if="!token" index="login" class="nav-right" @click="$router.push('/login')">登录</el-menu-item>
    </el-menu>

    <!--分割线-->
    <div class="divider"></div>
  </div>
</template>

<script>
  import '../static/font/iconfont.css'
  import {mapState,mapMutations} from 'vuex'
  import Cookies from 'js-cookie'
  import {getSearchHot} from "../api/article";

  export default {
      name: "Header",
      data(){
        return{
          activeIndex:'index',
          keyWord:{},
          searchText:'',
          searchBox:false,  //搜索框的显示隐藏
        }
      },
      mounted(){
        this.getHotSearchList();
      },
      computed:{
        ...mapState('user', {
          token: state => state.token,
          header_image: state => state.header_image,
          message_num: state => state.message_num,
        })
      },
      methods:{
        ...mapMutations('user', [
          'SET_token'
        ]),
        loginOut(){
          Cookies.remove('token');
          this.SET_token('');
          this.$router.push('/');
        },
        getHotSearchList(){
          getSearchHot().then(res=>{
            this.keyWord=res.data.results;
          }).catch(error=>{
            console.log(error.data);
          })
        },
        search(){
            this.$router.push('/search?content=' + this.searchText);
        },
        keyWordSearch(item){
          this.searchBox=false;
          this.searchText=item.keywords;
          this.$router.push('/search?content=' + item.keywords);
        },
        checkLogin(value){
          if(this.token){
            this.$router.push(value);
          }else{
            this.$router.push('/login');
            this.$message.error('请先登录');
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import '../stylus/color.styl'
  .header_main-box{
    width 100%
    background-color $color-background
  }
  .logo{
    margin-right: 30px;
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    margin-left: 30px;
  }
  .nav-right{
    float: right;
  }
  body a{
    text-decoration: none;   /* 不让链接有下划线 */
  }
  .head_portrait{
    border: 1px solid $color-sub;
    height: 50px;
    width: 50px;
    margin-left: 14px;
    border-radius: 50px;
    margin-bottom 4px;
  }
  .input-search{
    width: 200px;
    transition: all 0.3s;
  }
  .input-search:hover{
    width: 250px;
  }
  .divider{
    width: 100%;
    position: relative;
    top:-1px;
    height: 1px;
    background-color: $color-divider;
    margin-bottom 10px
  }
  .index-search-title{
    font-size 14px
    color $color-gray
    display block
    margin-bottom 10px
  }
  .index-search-hot-box{
    max-width 220px
    overflow hidden
    margin-bottom 15px
  }
  .index-search-hot{
    border 1px solid $color-border
    margin-right 10px
    margin-top  10px
    display inline-block
    padding 2px 5px
    font-size 12px
    border-radius 3px
    cursor pointer
    color $color-content
  }
  .index-search-ago{
    font-size 14px
    color $color-content
    cursor: pointer;
    line-height 28px
    padding 6px 0
    display block
  }
  .index-search-ago:hover{
    background-color $color-background-gray
  }
  .iconfont{
    margin 0 5px
  }
  .icon-guangchang{
    font-size 16px
  }
  .icon-guanzhu{
    font-size 18px
  }
  .icon-icon{
    font-size 19px
  }
  .icon-zhuye{
    font-size 20px
  }
  .icon-xiangce{
    font-size 15px
    margin 0 7px
  }
  .icon-collection-b{
    font-size 16px;
    margin 0 7px
  }
  .icon-favour-full{
    font-size 15px;
    margin 0 7px
  }
  .el-icon-search{
    font-size 18px
    color $color-gray
    margin-bottom 3px
    margin-right 0
  }
  .icon-lishi{
    font-size 16px
    font-weight 700
    margin-left 7px
    margin-right 15px
  }
  .icon-shezhi{
    font-size 15px
    margin 0 7px
  }
  .icon-tuichu{
    font-size 14px;
    margin 0 7px
  }
  .badge{
    display inline-block
    position absolute
    margin-left -5px
    margin-top -10px
  }
</style>
